<template>
  <el-drawer
    :before-close="handleClose"
    :close-on-click-modal="false"
    :model-value="datas.visble"
    :title="`${datas.forms.title}用户`"
    size="600px">
    <el-form
      ref="ruleFormRef"
      :disabled="drawerProps.isView"
      :hide-required-asterisk="drawerProps.isView"
      :label-position="'top'"
      :model="drawerProps.row"
      :rules="rules"
      label-suffix=" :"
      label-width="100px"
    >
      <div style="display:flex;">
        <el-form-item label="用户账号" prop="username" style="margin-right: 20px">
          <el-input v-model="drawerProps.row!.username" clearable placeholder="请填写用户姓名" style="width:270px;"></el-input>
        </el-form-item>

        <el-form-item label="用户姓名" prop="username">
          <el-input v-model="drawerProps.row!.username" clearable placeholder="请填写用户姓名" style="width:270px;"></el-input>
        </el-form-item>
      </div>
      <div style="display:flex;">
        <el-form-item label="业务类型" prop="gender" style="margin-right: 20px">
          <el-select v-model="drawerProps.row!.gender" clearable placeholder="请选择性别" style="width:270px;">
            <el-option v-for="item in genderType" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>

        <el-form-item label="资源领取限定模板" prop="gender">
          <el-select v-model="drawerProps.row!.gender" clearable placeholder="请选择性别" style="width:270px;">
            <el-option v-for="item in genderType" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
      </div>

      <div style="display:flex;">
        <el-form-item label="联系方式" prop="username" style="margin-right: 20px">
          <el-input v-model="drawerProps.row!.username" clearable placeholder="请填写用户姓名" style="width:270px;"></el-input>
        </el-form-item>

        <el-form-item label="资源领取限定模板" prop="gender">
          <el-select v-model="drawerProps.row!.gender" clearable placeholder="请选择性别" style="width:270px;">
            <el-option v-for="item in genderType" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
      </div>

      <div style="display:flex;">
        <el-form-item label="负责部门" prop="gender" style="margin-right: 20px">
          <el-select v-model="drawerProps.row!.gender" clearable placeholder="请选择性别" style="width:270px;">
            <el-option v-for="item in genderType" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>

        <el-form-item label="所属部门(可多选)" prop="gender">
          <el-select v-model="drawerProps.row!.gender" clearable placeholder="请选择性别" style="width:270px;">
            <el-option v-for="item in genderType" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
      </div>

      <div>
        <el-switch
          v-model="drawerProps.row!.status"
          :active-text="drawerProps.row!.status ? '启用' : '禁用'"
          :active-value="1"
          :inactive-value="0"
          inline-prompt
          @change="() => changeStatus(drawerProps.row!)"
        />
      </div>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button v-show="!drawerProps.isView" type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-drawer>
</template>

<script lang="ts" name="addUsers" setup>
import {defineEmits, reactive, ref} from "vue";
import {genderType} from "@/utils/dict";
import {ElMessage, FormInstance} from "element-plus";
import {User} from "@/api/interface";

const emit = defineEmits(['back'])

const rules = reactive({
  avatar: [{required: true, message: "请上传用户头像"}],
  photo: [{required: true, message: "请上传用户照片"}],
  username: [{required: true, message: "请填写用户姓名"}],
  gender: [{required: true, message: "请选择性别"}],
  idCard: [{required: true, message: "请填写身份证号"}],
  email: [{required: true, message: "请填写邮箱"}],
  address: [{required: true, message: "请填写居住地址"}]
});
const kaishi = () => {
  console.log('开始了')
}
kaishi()

interface DrawerProps {
  title: string;
  isView: boolean;
  row: Partial<User.ResUserList>;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}

// 使用defineProps来声明props
const props = defineProps({
  datas: Object
})
// const visible = ref(false);
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  row: {
    status: 1
  }
});
const handleClose = (done: () => void) => {
  emit('back')
}
// 接收父组件传过来的参数
// const acceptParams = (params: DrawerProps) => {
//   drawerProps.value = params;
//   drawerVisible.value = true;
// };


// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      await drawerProps.value.api!(drawerProps.value.row);
      ElMessage.success({message: `${drawerProps.value.title}用户成功！`});
      drawerProps.value.getTableList!();
      drawerVisible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};

const changeStatus = (row) => {

  console.log(row, '开关启用')
}

// defineExpose({
//   acceptParams
// });
</script>
